<template>
    <div id="box">
        <div class="box_one">
            <div class="box_one_1">
                <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 13v1c0 2.77-.664 5.445-1.915 7.846l-.227.42-1.747-.974c1.16-2.08 1.81-4.41 1.882-6.836L15 14v-1h2zm-6-3h2v4l-.005.379a12.941 12.941 0 0 1-2.691 7.549l-.231.29-1.55-1.264a10.944 10.944 0 0 0 2.471-6.588L11 14v-4zm1-4a5 5 0 0 1 5 5h-2a3 3 0 0 0-6 0v3c0 2.235-.82 4.344-2.271 5.977l-.212.23-1.448-1.38a6.969 6.969 0 0 0 1.925-4.524L7 14v-3a5 5 0 0 1 5-5zm0-4a9 9 0 0 1 9 9v3c0 1.698-.202 3.37-.597 4.99l-.139.539-1.93-.526c.392-1.437.613-2.922.658-4.435L19 14v-3A7 7 0 0 0 7.808 5.394L6.383 3.968A8.962 8.962 0 0 1 12 2zM4.968 5.383l1.426 1.425a6.966 6.966 0 0 0-1.39 3.951L5 11 5.004 13c0 1.12-.264 2.203-.762 3.177l-.156.29-1.737-.992c.38-.665.602-1.407.646-2.183L3.004 13v-2a8.94 8.94 0 0 1 1.964-5.617z" fill="rgba(50,152,219,1)"/></svg>
                <span>Finger</span>
            </div>
            <div  class="box_one_2">
                <label for="name">
                    <span class="Name">用户名：</span>
                    <el-input id="name" placeholder="Enter a user name" class="username" v-model="ZhangHu.username"/>
                </label>
            </div>
            <div class="box_one_3">
                <label for="pwd">
                    <span>密&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
                    <el-input placeholder="Enter a user password" id="pwd" class="username" show-password v-model="ZhangHu.password"/>
                </label>
            </div>
            <div class="box_one_4">
                <el-button color="#626aef" plain @click="Add()" class="button1">登录</el-button>
                <el-button color="#626aef" plain class="button3" @click="dialogVisible = true">注册</el-button>
                <el-button color="#626aef" plain  class="button2" @click="Reset()">重置</el-button>
            </div>
        </div>
        <div class="box-two">
            <img src="../assets/bg_name.png" alt="">
        </div>
        <!-- 点击注册按钮 显示注册 -->
        <el-dialog
            v-model="dialogVisible"
            title="注册"
            width="30%"
            :before-close="handleClose"
            class="tanchu"
        >
            <div>
                <el-input placeholder="请输入用户名" class="username" v-model="zhuCe.User"/>
            </div>
            <div style="margin-top: 20px;">
                <el-input placeholder="请输入密码" show-password v-model="zhuCe.Pass"/>
            </div>
            <div style="margin-top: 20px;">
                <el-input placeholder="请确定密码" show-password v-model="zhuCe.NewPass"/>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="AddzhuCe"
                        >Confirm</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { reactive, ref } from 'vue'
import {ElMessage,ElLoading, ElMessageBox} from 'element-plus'
import {useRouter} from 'vue-router'
import {login,loginInster} from '../api/login.js'
export default {
    setup(){
        const router = useRouter()
        const ZhangHu = reactive({
            username:'',
            password:''
        })
        // 存放 获取api接口数据
        const Listname = reactive([])
        
        // 确定 注册弹出框的显示或隐藏
        const dialogVisible = ref(false)
        // 当点击 注册弹出框右上边的按钮
        const handleClose = (done)=>{
            ElMessageBox.confirm('你确定你不注册了吗？')
                .then(()=>{
                    done()
                })
                .catch(()=>{
                    console.log('关闭了');
                })
        }
        // 绑定注册用的变量
        const zhuCe = reactive({
            User: '',
            Pass: '',
            NewPass: ''
        })
        // 点击注册按钮
        const AddzhuCe = ()=>{
            // 注册添加用户的接口
            // 判断 用户名 密码 one密码不能为空，并且 密码与one密码要一样
            if((zhuCe.User !== '' && zhuCe.Pass !== '' && zhuCe.NewPass !== '') && zhuCe.Pass === zhuCe.NewPass){
                loginInster({
                    username:zhuCe.User,
                    password:zhuCe.Pass
                }).then(()=>{
                    ElMessage({
                        message:'注册成功',
                        type:'warning',
                        duration:1500
                    })
                })
                // 注册的时候 顺便清除一下原先的token上的值
                window.localStorage.removeItem("token");
                // 刷新
                window.location.reload()
                // 关闭
                dialogVisible.value = false
            }else{
                ElMessage({
                    message:'不能为空，或者两次密码不一样',
                    type:'warning',
                    duration:1000
                })
            }
            
        }

        // api接口数据 查看表中的用户名和密码
        login().then((res)=>{
            const {data} = res
            Listname.values = data
            console.log(Listname.values);
        }).catch(err => console.log(err))
        // 点击登录按钮
        const Add = ()=>{
            // 循环列表中的数据 第一种做法
            // for(var i=0;i<Listname.values.length;i++){
            //     if(Listname.values[i].username === ZhangHu.username && Listname.values[i].password === ZhangHu.password){
            //        window.localStorage.setItem('token',ZhangHu.username)
            //         const loading = ElLoading.service({
            //             lock: true,
            //             text: '登录中',
            //             background: 'rgba(0, 0, 0, 0.7)',
            //         })
            //         setTimeout(()=>{
            //             loading.close()
            //             router.push('/zhuYe')
            //         },1500)
            //     }
            // }
            // if(ZhangHu.username === '' || ZhangHu.password === ''){
                // ElMessage({
                //     message:'用户名或者密码不能为空',
                //     type:'warning',
                //     duration:1000
                // })
            // }else{
            //     ElMessage({
            //         message:'用户名或者密码错误!',
            //         type:'error',
            //         duration:1000
            //     })
            // }
            // 过滤 找到 第2种做法
            let filter = Listname.values.filter(company => company.username === ZhangHu.username && company.password === ZhangHu.password)
            if(filter.length>0){
                window.localStorage.setItem('token',ZhangHu.username)
                const loading = ElLoading.service({
                    lock: true,
                    text: '登录中',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                setTimeout(()=>{
                    loading.close()
                    router.push('/zhuYe')
                },1500)
            }else if(ZhangHu.username === '' || ZhangHu.password === ''){
                ElMessage({
                    message:'用户名或者密码不能为空',
                    type:'warning',
                    duration:1000
                })
            }else{
                ElMessage({
                    message:'用户名或者密码错误!，可能是您还没有注册呢？',
                    type:'error',
                    duration:1500
                })
            }
        }

        // 重置按钮
        const Reset = ()=>{
            ZhangHu.username = ''
            ZhangHu.password = ''
        }

        return{
            ZhangHu,
            Add,
            Reset,
            dialogVisible,
            handleClose,
            zhuCe,
            AddzhuCe
        }
    }
}
</script>
<style lang="less" scoped>
    #box{
        width: 100%;
        height: 937px;
        background-image: url(../assets/bg.png);
        position: relative;
        min-width: 1400px;
        background-repeat: no-repeat;
        // 登录盒子
        .box_one{
            width: 500px;
            height: 300px;
            opacity: .6;
            position: absolute;
            right: 180px;
            top: 45%;
            transform: translateY(-50%);
            border-radius: 10px;
            display: grid;
            grid-auto-columns: auto;
            grid-auto-rows: 80px auto auto auto;
            .box_one_1{
                position: relative;
                width: 100%;
                .svg{
                    left: 50%;
                    right: 50%;
                    transform: translateX(-50%);
                    position: absolute;
                    width: 60px;
                    height: 50px;
                }
                span{
                    left: 50%;
                    transform: translateX(-50%);
                    position: absolute;
                    top: 50px;
                    font-size: 25px;
                    font-weight: bold;

                }
            }
        }
        div{
            span{
                font-weight: 600;
                font-size: 17px;
            }
            .username{
                margin-top: 7px;
            }
        }
        .box_one_4{
            position: relative;
            .button1{
                font-size: 18px;
                position: absolute;
                left: 30%;
                right: 50%;
                transform: translateX(-50%);
            }
            .button3{
                font-size: 18px;
                position: absolute;
                left: 38%;
            }
            .button2{
                font-size: 18px;
                position: absolute;
                left: 64%;
                right: 50%;
                transform: translateX(-50%);
            }
        }

        // 左边
        .box-two{
            position: absolute;
            width: 300px;
            height: 300px;
            left: 250px;
            top: 50%;
            bottom: 50%;
            transform: translateY(-90%);
            img{
                width: 300px;
                height: 500px;
            }
        }
    }
</style>
